<template>
  <table>
    <thead>
    <tr>
      <th>音频ID</th>
      <th>文件名称</th>
      <th>图片</th>
      <th>标题</th>
      <th>类型ID</th>
      <th>顾问ID</th>
      <th>上传时间</th>
      <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr v-for="(audio, index) in audioList" :key="index">
      <td>{{ audio.audioId }}</td>
      <td>
        {{ truncateFileName(audio.fileName) }}
      </td>
      <td>
        <img :src="getImageUrl(audio.image)" alt="音频图片" style="width: 50px; height: 50px;" />
      </td>
      <td>{{ audio.title }}</td>
      <td>{{ audio.typeId }}</td>
      <td>{{ audio.consultantId }}</td>
      <td>{{ audio.uploadTime }}</td>
      <td>
        <button class="button" @click="deleteAudio(audio.audioId)">删除</button>
        <button class="button" @click="showEditDialog(audio)">修改</button>
      </td>
    </tr>
    </tbody>
  </table>
  <EditDialogComponent v-if="showEditDialogVisible" :audio="editAudio" @updateAudio="updateAudio" @closeDialog="showEditDialogVisible = false"/>
</template>

<script setup>
import { ref, defineProps, defineEmits } from 'vue';
import axios from 'axios';
import EditDialogComponent from "@/components/form/right/sunkaixuan/EditDialogComponent.vue";

// 接收父组件传递的音频列表
const props = defineProps({
  audioList: {
    type: Array,
    required: true
  }
});

// 定义一个方法用于截断文件名
const truncateFileName = (fileName, maxLength = 10) => {
  if (fileName.length > maxLength) {
    return fileName.slice(0, maxLength) + '...';
  }
  return fileName;
};

const emit = defineEmits(['updateAudioList']);

const deleteAudio = async (audioId) => {
  try {
    // 正确的接口地址，使用模板字符串将 audioId 插入到 URL 中
    const response = await axios.delete(`http://127.0.0.1:9090/Audio/delete/${audioId}`);
    console.log(response.data);
    // 这里可以根据接口返回的数据，进行一些后续处理，例如更新列表
    const newAudioList = props.audioList.filter(audio => audio.audioId!== audioId);
    // 触发父组件更新音频列表的事件
    emit('updateAudioList', newAudioList);
  } catch (error) {
    console.error('调用接口删除音频时出错:', error);
    // 显示错误消息，例如使用 Vue 的通知组件或在界面上显示一个错误提示
    alert('删除音频失败，请重试！');
  }
};

const showEditDialogVisible = ref(false);
const editAudio = ref({});

const showEditDialog = (audio) => {
  editAudio.value = {...audio };
  showEditDialogVisible.value = true;
};

const updateAudio = (updatedAudio) => {
  const index = props.audioList.findIndex(audio => audio.audioId === updatedAudio.audioId);
  if (index!== -1) {
    const newAudioList = [...props.audioList];
    newAudioList[index] = updatedAudio;
    emit('updateAudioList', newAudioList);
  }
  showEditDialogVisible.value = false;
};

// 生成图片的 URL 方法
const getImageUrl = (imageName) => {
  return `http://127.0.0.1:9090/file/download/byte/${imageName}`;
};
</script>

<style scoped>
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}
th {
  background-color: #f2f2f2;
}
.button{
  height:25px;
  font-size: 14px;
  background-color: rgba(64,158,255,0.81);
  width: 100px;
  text-align:  center;
  cursor:pointer;
  border-radius: 10px;
  color: white;
  border: none;
  float: none
}
</style>